<template>
  <div>
    <div class="top_box">
      <el-card class="box-card">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
      <el-card class="box-card">
        <el-form>
          <el-form-item label="状态:">
            <el-radio-group>
              <el-radio label="全部"></el-radio>
              <el-radio label="草稿"></el-radio>
              <el-radio label="待审核"></el-radio>
              <el-radio label="审核通过"></el-radio>
              <el-radio label="审核失败"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道:">
            <el-select placeholder="请选择文章频道">
              <el-option label="推荐" value="shanghai"></el-option>
              <el-option label="html" value="beijing"></el-option>
              <el-option label="开发者咨询" value="shanghai"></el-option>
              <el-option label="C++" value="beijing"></el-option>
              <el-option label="CSS" value="shanghai"></el-option>
              <el-option label="数据库" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期:">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="time"
                style="width: 40%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">筛选</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card" style="margin-top: 20px">
        <h4>根据筛选条件共查询到 5001 条结果：</h4>
      </el-card>
      <el-card class="box-card">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="cover.images" label="封面" width="180">
            <template slot-scope="scope">
              <img
                :src="scope.row.cover.images[0]"
                alt=""
                width="200px"
                height="150px"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="180"
          ></el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
          <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
          <el-table-column prop="read_count" label="阅读数"> </el-table-column>
          <el-table-column prop="comment_count" label="评论数">
          </el-table-column>
          <el-table-column prop="like_count" label="点赞数"> </el-table-column>
          <el-table-column prop="address" label="操作"> </el-table-column>
        </el-table>
        <div class="fenye">
            <el-pagination
            background
            layout="prev, pager, next"
            :total="1000"
        >
        </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getArticlesList } from '@/api/user'
export default {
  name: 'ArticlePage',
  data () {
    return {
      time: null,
      tableData: {}
    }
  },
  methods: {
    async getArticles () {
      const res = await getArticlesList()
      console.log(res)
      this.tableData = res.data.results
    }
  },
  async mounted () {
    await this.getArticles()
  }
}
</script>

<style scoped lang='scss'>
// 去除el-card默认阴影
::v-deep .is-always-shadow {
  box-shadow: none;
}

.fenye{
    margin-top: 20px;
    text-align: center;
}
</style>
